<script setup>
    import {reactive, ref} from "vue"
</script>

<template>
    <div class="container">
        <header>
            <slot name="title"></slot>
        </header>
        <section class="main">
            <!-- 内容不确定，使用插槽 -->
            <slot name="content" userName="careathers"></slot>
        </section>
        <footer>
            <slot name="btn"></slot>
        </footer>
    </div>
</template>

<style>
    .container {
        width: 400px;
        margin: 50px auto;
        border: 1px #ccc solid;
    }
    header {
        padding: 0 1em;
        border-bottom: 1px #ccc solid;
    }
    .main {
        padding: 1em 2em;
    }
    footer {
        padding-left: 60%;
        padding-bottom: 1em;
    }
    footer button {
        margin: 0 6px;
        width: 60px;
        height: 32px;
        border: #ccc 1px solid;
        border-radius: 4px;
        background-color: rgb(20, 109, 192);
        color: #ddd;
        cursor: pointer;
    }
</style>